<template>
  <view>
    <view class="house-item u-flex-y-center" :style="customStyle" @click="handleDetail">
      <image :src="prefixURL(item.image) || ''" :style="{height:imageHeight+'rpx',width:imageWidth+'rpx'}"
        class="house-img" mode="">
      </image>
      <slot name="imgLeft"></slot>
      <view class="house-content u-flex-between u-flex-column  u-flex-1" :style="{height:imageHeight+'rpx'}">
        <slot name="right">
          <view class="house-name">{{item.title}}</view>
          <view class="house-desc">“{{item.description}}”</view>
          <view class="house-price">优惠价：{{item.price}}万</view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    useAttrs
  } from 'vue';
  import {
    prefixURL
  } from '../../util/util';
  const emit = defineEmits()
  const $attrs = useAttrs()
  const props = defineProps({
    item: {
      type: Object,
      default: () => {}
    },
    imageHeight: {
      type: [Number,String],
      default: 136
    },
    imageWidth: {
      type: [Number,String],
      default: 152
    },
    customStyle: {
      type: String,
      default: ''
    }
  })
  const handleDetail = () => {
    if ($attrs['page']) {
      if ($attrs['page'] == '/') return
      uni.$u.route($attrs['page'])
    } else {
      uni.$u.route(`/pages/index/houseDetail?id=${props.item.id}`)
    }
  }
</script>

<style scoped lang="scss">
  .house-item {
    padding: 16rpx;
    background: #F7F7F7;
    border-radius: 20rpx;
    margin-top: 20rpx;
    position: relative;

    .house-img {
      width: 152rpx;
      height: 136rpx;
      margin-right: 16rpx;
    }

    .house-content {
      padding: 2rpx 0;

      .house-name {
        font-size: 26rpx;
        color: #333;
        font-weight: 800;
      }

      .house-desc {
        font-size: 22rpx;
        color: #E47117;
      }

      .house-price {
        color: #DF0F0F;
        font-weight: 800;
        font-size: 24rpx;
      }
    }
  }
</style>